// 所有构件工具又是基于node.js平台运行的
// 模块化默认采用commonjs

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// plugin一般是一个构造函数，需要创建实例对象
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清理build目录
// 旧版本用法：
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// 新版本用法：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 压缩CSS
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
process.env.NODE_ENV = "development"

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    // filename: 'built.js',
    filename: 'built.js',
    // __dirname代码当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          // 'style-loader',
          // 输出css外部文件，取代style-loader
          MiniCssExtractPlugin.loader,
          // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
          'css-loader',
          {
            // css兼容性处理
            // 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        // 问题，处理不了html中的img图片
        test: /\.(jpe?g|png|gif)$/,
        // 下载url-loader和file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8KB就会被base64处理
            // 减少请求数量（减轻服务器压力），但体积会更大，文件请求速度更慢
            // 8-12kb
          limit: 8 * 1024,
          // 因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          esModule: false,
          // 给图片重命名
          // [ext]取文件原来扩展名
          name: '[hash:8].[ext]'
          // 输出路径
          // outputPath: 'imgs'
        }
      },
      // 打包其他资源
      {
        // css/js/html以外的资源
        // exclude: /\.(less|sass|json|scss|css|js|html)$/,
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]'
          // outputPath: 'media' 
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img,从而能被上面的url-loader进行处理）
        // loader: 'html-loader'
        loader: 'html-withimg-loader'
      }
    ]
  },
  plugins: [
    // build目录下有n个文件夹就执行n+1次
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'built.css'
    }),
    new HtmlWebpackPlugin({
      template: './src/index_tmp.html'
    }),
    new OptimizeCssAssetsWebpackPlugin()
    // new CleanWebpackPlugin({
    //   cleanStaleWebpackAssets: true,
    //   cleanOnceBeforeBuildPatterns: [
    //     "**/*", "!1.js", "!images",
    //     resolve(__dirname, 'build')
    //   ]
    // })
    
  ],
  mode: 'development',
  // devServer开发服务器
  // 用来自动化（自动编译、自动打开浏览器，自动刷新）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：webpack-dev-server
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000
    // 自动打开浏览器
    // open: true
  }
}

